<template>
      <div id="loading-bar"></div>
      <nav :class="{'nav-start':navStart,'nav-next':!navStart}">
          <ul class="nav-item-wrapper" :class="{'nav-start':navStart,'nav-next':!navStart}">
            <li><img src="./assets/img/icon.png" alt="007.icu" :class="{'icon-img-start':navStart,'icon-img-next':!navStart}"></li>
            <li class="choice-wrapper">
              <ul class="choice-item-wrapper" :class="{'choice-start':navStart,'choice-next':!navStart}">
                <li><router-link to="/" class="jump">首页</router-link></li>
                <li><router-link to="/login" class="jump">登录</router-link></li>
                <li><router-link to="/articles" class="jump">文章</router-link></li>
                <li><router-link to="/about" class="jump">关于</router-link></li>
              </ul>  
            </li>
            
          </ul>
      </nav>
      <main>
        <router-view/>
      </main>
      <footer>
          <div>footer</div>
          <a href="#">回到顶部</a>
      </footer> 
</template>
<style lang="less">
@import url('../node_modules/reset.css/reset.css');
@import url('../node_modules/animate.css/animate.min.css');
@import url('../src/assets/less/common.css');

a{
  text-decoration: none;
}

.transition-all-3{
    transition:all ease-in .3s;
}


//顶部的导航状态
.nav-start{
  height: 10vh;
  // 使用rgba不会让里边的子元素变透明，用opacity子元素就跟着透明了
  background-color: rgba(255, 255, 255, 0.5);
}

.icon-img-start{
    height: 10vh;      
}

.choice-start{
  line-height: 10vh;
}

.nav-item-start{
    line-height: 10vh;
}

//滑动之后的导航状态
.nav-next{
  height: 5vh;
  background-color: lightgray;
}

.icon-img-next{
    height: 5vh;      
}

.choice-next{
    line-height: 5vh;
}

.nav-item-next{
    line-height: 5vh;
}


@media screen and (min-width: 900px) {
nav{
  width: 100%;
  position: fixed;
  top: 0;
  .transition-all-3;
  z-index: 9999;

  .nav-item-wrapper{
    display: flex;
    justify-content: space-between;

    img{
      .transition-all-3;
    }

    .choice-wrapper{
       width:35%;
       .choice-item-wrapper{
          display: flex;
          justify-content: space-around;
          font-weight: 600;
          .jump{
            color: black;

             &:hover{
               color:blue;
             }
          }
       }
    }
  }

}
}

@media screen and (max-width: 899px){
  //懒得写了
  nav{
    display: none;
  }
}


footer{
  height: 10vh;
  width: 100%;
  background-color: lightgrey;

}
</style>
<script>
import {ref,onBeforeMount} from 'vue'

function navStatus(){
  const navStart = ref(true)
  onBeforeMount(()=>{
    document.onscroll =  ()=>{
      console.log('滑动了')
      if(document.documentElement.scrollTop!=0){
        navStart.value = false
      }else{
        navStart.value = true
      }
    }
  })
  return navStart
} 

export default{
  setup(){
      const navStart = navStatus()
      return{
        navStart
      }
  }
}
</script>
